<template>
  <div class="character-select">
    <!-- 角色网格 -->
    <div class="character-grid">
      <div 
        v-for="character in characters"
        :key="character.id"
        class="character-card"
        :class="{ 
          selected: selectedCharacter?.id === character.id,
          locked: !character.isUnlocked,
          [`rarity-${character.rarity}`]: true
        }"
        @click="handleCharacterSelect(character)"
      >
        <!-- 稀有度光效 -->
        <div class="rarity-glow" :class="`rarity-${character.rarity}`"></div>
        
        <!-- 角色头像 -->
        <div class="character-avatar">
          <div class="avatar-container">
            <div class="avatar-placeholder">
              {{ getCharacterEmoji(character.id) }}
            </div>
            <div v-if="!character.isUnlocked" class="lock-overlay">
              <i class="lock-icon">🔒</i>
            </div>
          </div>
          <div class="rarity-badge" :class="`rarity-${character.rarity}`">
            {{ getRarityText(character.rarity) }}
          </div>
        </div>
        
        <!-- 角色信息 -->
        <div class="character-info">
          <h3 class="character-name">{{ character.name }}</h3>
          <p class="character-description">{{ character.description }}</p>
          
          <!-- 角色属性条 -->
          <div class="character-stats">
            <div class="stat-group">
              <div class="stat-item">
                <div class="stat-icon">⚡</div>
                <div class="stat-bar">
                  <div 
                    class="stat-fill speed" 
                    :style="{ width: `${Math.min((character.stats.baseSpeed / 300) * 100, 100)}%` }"
                  ></div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🦘</div>
                <div class="stat-bar">
                  <div 
                    class="stat-fill jump" 
                    :style="{ width: `${Math.min((character.stats.jumpForce / 600) * 100, 100)}%` }"
                  ></div>
                </div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">❤️</div>
                <div class="stat-bar">
                  <div 
                    class="stat-fill health" 
                    :style="{ width: `${Math.min((character.stats.health / 5) * 100, 100)}%` }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 特殊能力标签 -->
          <div class="character-abilities">
            <div 
              v-for="ability in character.abilities.slice(0, 2)"
              :key="ability.type"
              class="ability-tag"
              :title="ability.description"
            >
              {{ ability.name }}
            </div>
            <div v-if="character.abilities.length > 2" class="ability-more">
              +{{ character.abilities.length - 2 }}
            </div>
          </div>
          
          <!-- 解锁条件或统计信息 -->
          <div class="character-status">
            <div v-if="!character.isUnlocked" class="unlock-condition">
              <i class="unlock-icon">🎯</i>
              <span>{{ character.unlockCondition.description }}</span>
            </div>
            <div v-else-if="character.timesPlayed > 0" class="character-record">
              <div class="record-highlight">
                <span class="record-label">最高分</span>
                <span class="record-value">{{ formatNumber(character.bestScore) }}</span>
              </div>
            </div>
            <div v-else class="character-ready">
              <i class="ready-icon">✨</i>
              <span>准备就绪</span>
            </div>
          </div>
        </div>
        
        <!-- 选中指示器 -->
        <div v-if="selectedCharacter?.id === character.id" class="selected-indicator">
          <i class="selected-icon">✓</i>
        </div>
      </div>
    </div>
    
    <!-- 选择确认按钮 -->
    <div class="selection-actions">
      <button 
        class="confirm-btn"
        :class="{ 
          active: selectedCharacter && selectedCharacter.isUnlocked,
          disabled: !selectedCharacter || !selectedCharacter.isUnlocked
        }"
        :disabled="!selectedCharacter || !selectedCharacter.isUnlocked"
        @click="confirmSelection"
      >
        <div class="btn-content">
          <i class="btn-icon">🎮</i>
          <div class="btn-text">
            <span class="btn-main">{{ selectedCharacter ? `选择 ${selectedCharacter.name}` : '选择角色' }}</span>
            <span class="btn-sub">开始游戏</span>
          </div>
        </div>
      </button>
    </div>
    
    <!-- 角色详情模态框 -->
    <div v-if="showCharacterDetail" class="character-detail-modal" @click="closeCharacterDetail">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <div class="modal-title">
            <h3>{{ detailCharacter?.name }}</h3>
            <div class="modal-rarity" :class="`rarity-${detailCharacter?.rarity}`">
              {{ getRarityText(detailCharacter?.rarity || 'common') }}
            </div>
          </div>
          <button class="close-btn" @click="closeCharacterDetail">
            <i class="close-icon">×</i>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="character-showcase">
            <div class="showcase-avatar">
              <div class="avatar-large">
                {{ getCharacterEmoji(detailCharacter?.id || '') }}
              </div>
            </div>
            <div class="showcase-info">
              <p class="showcase-description">{{ detailCharacter?.description }}</p>
              
              <!-- 详细属性 -->
              <div class="detailed-stats">
                <div class="stat-detail">
                  <span class="stat-name">基础速度</span>
                  <span class="stat-number">{{ detailCharacter?.stats.baseSpeed }}</span>
                </div>
                <div class="stat-detail">
                  <span class="stat-name">跳跃力</span>
                  <span class="stat-number">{{ detailCharacter?.stats.jumpForce }}</span>
                </div>
                <div class="stat-detail">
                  <span class="stat-name">生命值</span>
                  <span class="stat-number">{{ detailCharacter?.stats.health }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 能力详情 -->
          <div class="abilities-showcase">
            <h4>特殊能力</h4>
            <div class="ability-cards">
              <div 
                v-for="ability in detailCharacter?.abilities"
                :key="ability.type"
                class="ability-card"
              >
                <div class="ability-icon">{{ getAbilityIcon(ability.type) }}</div>
                <div class="ability-info">
                  <div class="ability-name">{{ ability.name }}</div>
                  <div class="ability-description">{{ ability.description }}</div>
                  <div class="ability-stats">
                    <span class="ability-value">效果: {{ ability.value }}{{ getAbilityUnit(ability.type) }}</span>
                    <span v-if="ability.duration" class="ability-duration">
                      持续: {{ (ability.duration / 1000).toFixed(1) }}s
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 解锁条件 -->
          <div v-if="!detailCharacter?.isUnlocked" class="unlock-info">
            <h4>解锁条件</h4>
            <div class="unlock-requirement">
              <i class="requirement-icon">🎯</i>
              <span>{{ detailCharacter?.unlockCondition.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useGameStore } from '@/stores/gameStore'
import type { Character } from '@/game/Character'
import { CharacterAbilityType } from '@/game/Character'

/**
 * 角色选择组件
 * 提供角色选择界面，显示角色属性、能力和解锁状态
 * @component
 * @example
 * <CharacterSelect @character-selected="handleCharacterSelected" />
 */

// 定义事件
const emit = defineEmits<{
  characterSelected: [character: Character]
}>()

const gameStore = useGameStore()

// 响应式数据
const selectedCharacter = ref<Character | null>(null)
const showCharacterDetail = ref(false)
const detailCharacter = ref<Character | null>(null)

// 计算属性
const characters = computed(() => gameStore.characters)

/**
 * 处理角色选择
 * @param character - 选择的角色
 */
const handleCharacterSelect = (character: Character): void => {
  if (!character.isUnlocked) {
    // 显示角色详情（包含解锁条件）
    detailCharacter.value = character
    showCharacterDetail.value = true
    return
  }
  
  selectedCharacter.value = character
  console.log('选择角色:', character.name)
}

/**
 * 确认选择
 */
const confirmSelection = (): void => {
  if (!selectedCharacter.value || !selectedCharacter.value.isUnlocked) {
    return
  }
  
  // 更新游戏存储中的选中角色
  gameStore.selectCharacter(selectedCharacter.value.id)
  
  // 触发事件
  emit('characterSelected', selectedCharacter.value)
  
  console.log('确认选择角色:', selectedCharacter.value.name)
}

/**
 * 关闭角色详情模态框
 */
const closeCharacterDetail = (): void => {
  showCharacterDetail.value = false
  detailCharacter.value = null
}

/**
 * 获取角色表情符号
 * @param characterId - 角色ID
 * @returns 表情符号
 */
const getCharacterEmoji = (characterId: string): string => {
  const emojiMap: Record<string, string> = {
    runner: '🏃',
    speedster: '💨',
    jumper: '🦘',
    tank: '🛡️',
    collector: '💰',
    ninja: '🥷'
  }
  return emojiMap[characterId] || '👤'
}

/**
 * 获取稀有度文本
 * @param rarity - 稀有度
 * @returns 稀有度文本
 */
const getRarityText = (rarity: string): string => {
  const rarityMap: Record<string, string> = {
    common: '普通',
    rare: '稀有',
    epic: '史诗',
    legendary: '传说'
  }
  return rarityMap[rarity] || '普通'
}

/**
 * 获取能力类型文本
 * @param abilityType - 能力类型
 * @returns 能力类型文本
 */
const getAbilityTypeText = (abilityType: CharacterAbilityType): string => {
  const typeMap: Record<CharacterAbilityType, string> = {
    [CharacterAbilityType.SPEED]: '速度',
    [CharacterAbilityType.JUMP]: '跳跃',
    [CharacterAbilityType.SHIELD]: '护盾',
    [CharacterAbilityType.MAGNET]: '磁铁',
    [CharacterAbilityType.HEALTH]: '生命',
    [CharacterAbilityType.SLIDE]: '滑铲'
  }
  return typeMap[abilityType] || '未知'
}

/**
 * 获取能力图标
 * @param abilityType - 能力类型
 * @returns 能力图标
 */
const getAbilityIcon = (abilityType: CharacterAbilityType): string => {
  const iconMap: Record<CharacterAbilityType, string> = {
    [CharacterAbilityType.SPEED]: '⚡',
    [CharacterAbilityType.JUMP]: '🦘',
    [CharacterAbilityType.SHIELD]: '🛡️',
    [CharacterAbilityType.MAGNET]: '🧲',
    [CharacterAbilityType.HEALTH]: '❤️',
    [CharacterAbilityType.SLIDE]: '🏃'
  }
  return iconMap[abilityType] || '❓'
}

/**
 * 获取能力单位
 * @param abilityType - 能力类型
 * @returns 能力单位
 */
const getAbilityUnit = (abilityType: CharacterAbilityType): string => {
  const unitMap: Record<CharacterAbilityType, string> = {
    [CharacterAbilityType.SPEED]: 'x',
    [CharacterAbilityType.JUMP]: 'x',
    [CharacterAbilityType.SHIELD]: 's',
    [CharacterAbilityType.MAGNET]: 'px',
    [CharacterAbilityType.HEALTH]: '',
    [CharacterAbilityType.SLIDE]: 'x'
  }
  return unitMap[abilityType] || ''
}

/**
 * 格式化数字
 * @param num - 数字
 * @returns 格式化后的字符串
 */
const formatNumber = (num: number): string => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

// 生命周期钩子
onMounted(() => {
  // 设置当前选中的角色
  const currentCharacter = gameStore.selectedCharacter
  if (currentCharacter) {
    selectedCharacter.value = currentCharacter
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/responsive.scss';

.character-select {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;

  .character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    
    @include mobile-all {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    
    @include tablet-all {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @include desktop-all {
      grid-template-columns: repeat(3, 1fr);
    }

    .character-card {
      position: relative;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      // 稀有度光效
      .rarity-glow {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 22px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        
        &.rarity-common {
          background: linear-gradient(45deg, #9E9E9E, #BDBDBD);
        }
        
        &.rarity-rare {
          background: linear-gradient(45deg, #2196F3, #64B5F6);
        }
        
        &.rarity-epic {
          background: linear-gradient(45deg, #9C27B0, #BA68C8);
        }
        
        &.rarity-legendary {
          background: linear-gradient(45deg, #FF9800, #FFB74D, #FFC107);
        }
      }

      &:hover:not(.locked) {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
        
        .rarity-glow {
          opacity: 0.6;
        }
      }

      &.selected {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(76, 175, 80, 0.3);
        border-color: #4CAF50;
        
        .rarity-glow {
          opacity: 0.8;
        }
      }

      &.locked {
        opacity: 0.6;
        cursor: not-allowed;

        &:hover {
          transform: none;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
          
          .rarity-glow {
            opacity: 0;
          }
        }
      }

      // 稀有度特殊效果
      &.rarity-legendary {
        background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          animation: shimmer 3s infinite;
        }
      }

      .character-avatar {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto $spacing-md;
        border-radius: 50%;
        background: linear-gradient(135deg, $primary-color, $secondary-color);
        display: flex;
        align-items: center;
        justify-content: center;

        .avatar-placeholder {
          font-size: 2.5rem;
          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
        }

        .lock-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .lock-icon {
            font-size: 1.5rem;
            filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
          }
        }

        .rarity-badge {
          position: absolute;
          top: -8px;
          right: -8px;
          padding: 2px 6px;
          border-radius: $border-radius-sm;
          font-size: 0.7rem;
          font-weight: bold;
          color: white;

          &.rarity-common {
            background: #9E9E9E;
          }

          &.rarity-rare {
            background: $secondary-color;
          }

          &.rarity-epic {
            background: #9C27B0;
          }

          &.rarity-legendary {
            background: $accent-color;
          }
        }
      }

      .character-info {
        text-align: center;

        .character-name {
          color: $text-color;
          font-size: 1.3rem;
          font-weight: bold;
          margin-bottom: $spacing-sm;
        }

        .character-description {
          color: $text-secondary;
          font-size: 0.9rem;
          line-height: 1.4;
          margin-bottom: $spacing-md;
        }

        .character-stats {
          margin-bottom: $spacing-md;

          .stat-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: $spacing-sm;

            .stat-label {
              font-size: 0.8rem;
              color: $text-secondary;
              min-width: 40px;
            }

            .stat-bar {
              flex: 1;
              height: 6px;
              background: #e0e0e0;
              border-radius: 3px;
              margin-left: $spacing-sm;
              overflow: hidden;

              .stat-fill {
                height: 100%;
                background: linear-gradient(90deg, $primary-color, $secondary-color);
                transition: width $transition-normal;
              }
            }
          }
        }

        .character-abilities {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-xs;
          justify-content: center;
          margin-bottom: $spacing-md;

          .ability-tag {
            background: rgba($primary-color, 0.1);
            color: $primary-color;
            padding: 2px 8px;
            border-radius: $border-radius-sm;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid rgba($primary-color, 0.3);
          }
        }

        .unlock-condition {
          background: rgba($warning-color, 0.1);
          color: darken($warning-color, 20%);
          padding: $spacing-sm;
          border-radius: $border-radius-sm;
          font-size: 0.8rem;
          border: 1px solid rgba($warning-color, 0.3);
          margin-bottom: $spacing-sm;

          .unlock-icon {
            margin-right: $spacing-xs;
          }
        }

        .character-record {
          background: rgba($success-color, 0.05);
          padding: $spacing-sm;
          border-radius: $border-radius-sm;
          border: 1px solid rgba($success-color, 0.2);

          .record-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            margin-bottom: 2px;

            &:last-child {
              margin-bottom: 0;
            }

            .record-label {
              color: $text-secondary;
            }

            .record-value {
              color: $success-color;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .selection-actions {
    display: flex;
    justify-content: center;

    .btn {
      padding: $spacing-md $spacing-xl;
      border: none;
      border-radius: $border-radius-lg;
      cursor: pointer;
      transition: $transition-normal;
      font-size: 1.1rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      &.btn-primary {
        background: $primary-color;
        color: white;

        &:hover:not(:disabled) {
          background: darken($primary-color, 10%);
          transform: translateY(-2px);
        }

        &:disabled {
          background: lighten($primary-color, 20%);
          cursor: not-allowed;
          transform: none;
        }
      }

      &.btn-large {
        padding: $spacing-lg $spacing-xxl;
        font-size: 1.2rem;
      }

      .btn-icon {
        font-size: 1.2em;
      }
    }
  }

  // 角色详情模态框
  .character-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: $spacing-lg;

    .modal-content {
      background: $bg-primary;
      border-radius: $border-radius-lg;
      max-width: 600px;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $spacing-lg;
        border-bottom: 1px solid #e0e0e0;

        h3 {
          color: $text-color;
          font-size: 1.5rem;
          margin: 0;
        }

        .close-btn {
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: $text-secondary;
          padding: $spacing-sm;
          border-radius: 50%;
          transition: $transition-fast;

          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }
        }
      }

      .modal-body {
        padding: $spacing-lg;

        .character-preview {
          display: flex;
          gap: $spacing-lg;
          margin-bottom: $spacing-xl;

          .preview-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, $primary-color, $secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
          }

          .preview-info {
            flex: 1;

            .preview-description {
              color: $text-secondary;
              line-height: 1.5;
              margin-bottom: $spacing-md;
            }

            .preview-rarity {
              display: inline-block;
              padding: $spacing-xs $spacing-sm;
              border-radius: $border-radius-sm;
              font-size: 0.8rem;
              font-weight: bold;
              color: white;

              &.rarity-common {
                background: #9E9E9E;
              }

              &.rarity-rare {
                background: $secondary-color;
              }

              &.rarity-epic {
                background: #9C27B0;
              }

              &.rarity-legendary {
                background: $accent-color;
              }
            }
          }
        }

        .abilities-detail {
          h4 {
            color: $text-color;
            font-size: 1.2rem;
            margin-bottom: $spacing-md;
          }

          .ability-list {
            .ability-detail {
              background: rgba($primary-color, 0.05);
              padding: $spacing-md;
              border-radius: $border-radius-md;
              margin-bottom: $spacing-md;
              border: 1px solid rgba($primary-color, 0.1);

              &:last-child {
                margin-bottom: 0;
              }

              .ability-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: $spacing-sm;

                .ability-name {
                  font-weight: bold;
                  color: $text-color;
                }

                .ability-type {
                  background: $primary-color;
                  color: white;
                  padding: 2px 8px;
                  border-radius: $border-radius-sm;
                  font-size: 0.75rem;
                }
              }

              .ability-description {
                color: $text-secondary;
                line-height: 1.4;
                margin-bottom: $spacing-sm;
              }

              .ability-stats {
                display: flex;
                gap: $spacing-md;
                font-size: 0.8rem;

                .ability-value,
                .ability-duration {
                  color: $primary-color;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@import '@/styles/responsive.scss';

@include mobile-all {
  .character-select {
    padding: $spacing-md;

    .character-select-header {
      margin-bottom: $spacing-lg;

      h2 {
        font-size: 1.8rem;
      }

      .subtitle {
        font-size: 1rem;
      }
    }

    .character-grid {
      grid-template-columns: 1fr;
      gap: $spacing-md;

      .character-card {
        padding: $spacing-md;

        .character-avatar {
          width: 60px;
          height: 60px;
          margin-bottom: $spacing-sm;

          .avatar-placeholder {
            font-size: 2rem;
          }

          .rarity-badge {
            font-size: 0.6rem;
            padding: 1px 4px;
          }
        }

        .character-info {
          .character-name {
            font-size: 1.1rem;
          }

          .character-description {
            font-size: 0.8rem;
          }

          .character-stats {
            .stat-item {
              .stat-label {
                font-size: 0.7rem;
                min-width: 35px;
              }

              .stat-bar {
                height: 5px;
              }
            }
          }

          .character-abilities {
            .ability-tag {
              font-size: 0.7rem;
              padding: 1px 6px;
            }
          }

          .unlock-condition {
            font-size: 0.75rem;
            padding: $spacing-xs;
          }

          .character-record {
            padding: $spacing-xs;

            .record-item {
              font-size: 0.75rem;
            }
          }
        }
      }
    }

    .selection-actions {
      .btn {
        width: 100%;
        padding: $spacing-md $spacing-lg;
        font-size: 1rem;

        &.btn-large {
          padding: $spacing-lg;
          font-size: 1.1rem;
        }
      }
    }

    .character-detail-modal {
      padding: $spacing-md;

      .modal-content {
        max-height: 90vh;

        .modal-header {
          padding: $spacing-md;

          h3 {
            font-size: 1.3rem;
          }
        }

        .modal-body {
          padding: $spacing-md;

          .character-preview {
            flex-direction: column;
            text-align: center;
            gap: $spacing-md;

            .preview-avatar {
              align-self: center;
              width: 80px;
              height: 80px;
              font-size: 2.5rem;
            }

            .preview-info {
              .preview-description {
                font-size: 0.9rem;
              }

              .preview-rarity {
                font-size: 0.75rem;
              }
            }
          }

          .abilities-detail {
            h4 {
              font-size: 1.1rem;
            }

            .ability-list {
              .ability-detail {
                padding: $spacing-sm;

                .ability-header {
                  .ability-name {
                    font-size: 0.9rem;
                  }

                  .ability-type {
                    font-size: 0.7rem;
                  }
                }

                .ability-description {
                  font-size: 0.8rem;
                }

                .ability-stats {
                  font-size: 0.75rem;
                }
              }
            }
          }
        }
      }
    }
  }
}

@include mobile-small {
  .character-select {
    padding: $spacing-sm;

    .character-grid {
      gap: $spacing-sm;

      .character-card {
        padding: $spacing-sm;

        .character-avatar {
          width: 50px;
          height: 50px;

          .avatar-placeholder {
            font-size: 1.5rem;
          }
        }

        .character-info {
          .character-name {
            font-size: 1rem;
          }

          .character-stats {
            .stat-item {
              margin-bottom: $spacing-xs;

              .stat-label {
                font-size: 0.65rem;
              }

              .stat-bar {
                height: 4px;
              }
            }
          }
        }
      }
    }

    .character-detail-modal {
      padding: $spacing-sm;

      .modal-content {
        .modal-body {
          .character-preview {
            .preview-avatar {
              width: 70px;
              height: 70px;
              font-size: 2rem;
            }
          }
        }
      }
    }
  }
}

// 横屏模式优化
@include landscape {
  @include mobile-all {
    .character-select {
      .character-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: $spacing-sm;
      }

      .character-detail-modal {
        .modal-content {
          max-height: 95vh;

          .modal-body {
            .character-preview {
              flex-direction: row;
              text-align: left;

              .preview-avatar {
                align-self: flex-start;
              }
            }
          }
        }
      }
    }
  }
}

// 触摸设备优化
@include touch-device {
  .character-select {
    .character-grid {
      .character-card {
        -webkit-tap-highlight-color: transparent;

        &:active:not(.locked) {
          transform: scale(0.98);
        }
      }
    }

    .selection-actions {
      .btn {
        min-height: 48px;

        &:active {
          transform: scale(0.98);
        }
      }
    }

    .character-detail-modal {
      .modal-content {
        .modal-header {
          .close-btn {
            min-width: 44px;
            min-height: 44px;
          }
        }
      }
    }
  }
}
</style>